<!--
 * @Author: wangming
 * @Date: 2021-04-20 15:15:53
 * @LastEditors: wangming
 * @LastEditTime: 2021-05-19 14:35:49
 * @Description: file content
-->
<template>
  <div>
    <div class="mb10">一行两列</div>
    <el-radio-group v-model="value.__config.rowsType" @change="change">
      <el-radio-button label="1:1"></el-radio-button>
      <el-radio-button label="1:2"></el-radio-button>
      <el-radio-button label="2:1"></el-radio-button>
    </el-radio-group>
    <div class="mb10 mt10">一行三列</div>
    <el-radio-group v-model="value.__config.rowsType" @change="change">
      <el-radio-button label="1:1:1"></el-radio-button>
      <el-radio-button label="1:2:1"></el-radio-button>
      <el-radio-button label="2:1:1"></el-radio-button>
      <el-radio-button label="1:1:2"></el-radio-button>
    </el-radio-group>
    <div class="mb10 mt10">一行四列</div>
    <el-radio-group v-model="value.__config.rowsType" @change="change">
      <el-radio-button label="1:1:1:1"></el-radio-button>
      <el-radio-button label="3:1:1:1"></el-radio-button>
      <el-radio-button label="1:1:1:3"></el-radio-button>
    </el-radio-group>
    <el-form-item label="显示下划线" class="tr mt5">
      <el-switch v-model="value.__config.underline"></el-switch>
    </el-form-item>
  </div>
</template>

<script>
import basicmixins from "./basicmixins";
export default {
  mixins: [basicmixins],
  data() {
    return {};
  },
  methods: {
    change(rowsType) {
      let children = rowsType.split(":");
      let total = children.reduce((current, child) => {
        current += parseInt(child);
        return current;
      }, 0);
      this.value.children = children.map((i, index) =>
        Object.assign({
          span: (24 / total) * i,
          children: this.value.children[index]?.children || [],
        })
      );
    },
  },
};
</script>
<style lang="scss" scoped></style>
